<template>
	<div>
		<!--会员列表-->
		<cy-table
				:height="350"
				:data="pageResult"
				:columns="filterColumns"
				:showBatchDelete="false"
				:showDeleteOperation="false"
				:showSelection="false"
				:showCustomOperation="true"
				:customLabel='text'
				@findPage="findPage"
				@handleEdit="handleEdit"
				@handleCustom="handleDetail"
				ref="CyTable"
		></cy-table>

		<!--会员编辑界面-->
		<el-dialog
				:title="operation?'查看':'编辑'"
				width="45%"
				:visible.sync="editDialogVisible"
				:close-on-click-modal="false">
			<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size">
				<el-form-item label="ID" prop="id" v-if="false">
					<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="用户ID" prop="id">
					<el-input v-model="dataForm.id" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="用户账号" prop="username">
					<el-input v-model="dataForm.username" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="用户昵称" prop="nickname">
					<el-input v-model="dataForm.nickname" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
					<el-input v-model="dataForm.mobile" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="会员类型" prop="memberTypeName">
					<el-input v-model="dataForm.memberTypeName" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="会员等级" prop="levelName">
					<el-input v-model="dataForm.levelName" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="注册时间" prop="createTime">
					<el-input v-model="dataForm.createTime" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="生日" prop="birthDate">
					<el-date-picker
							v-model="dataForm.birthDate"
							:disabled="disabledBoolean"
							type="date"
							placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="dataForm.sex" clearable placeholder="性别" :disabled="disabledBoolean">
						<el-option
								v-for="item in optionSex"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" :disabled="disabledBoolean" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:center">
				<el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
				<el-button :size="size" type="primary" :disabled="disabledBoolean" @click.native="submitForm"
				           :loading="editLoading">{{$t('action.submit')}}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import CyTable from '@/views/Core/JicTable'
import KtButton from '@/views/Core/KtButton'

export default {
	components: {
		CyTable, KtButton
	},

	data() {
		return {
			size: 'small',
			text: '查看',
			disabledBoolean: true,
			filters: {
				username: '',
				nickname: '',
				mobile: ''
			},
			optionSex: [{id: 0, name: '男'}, {id: 1, name: '女'}],
			memberTypeList: [],
			filterColumns: [
				{prop: 'id', label: '序号', minWidth: 80},
				{prop: 'username', label: '用户账号' , minWidth: 120},
				{prop: 'nickname', label: '昵称', minWidth: 120},
				{prop: 'mobile', label: '手机号码', minWidth: 120},
				{prop: 'userCity', label: '生日', formatter: this.formatterBirthday, minWidth: 120},
				{prop: 'password', label: '会员卡号', minWidth: 300},
				{prop: 'memberTypeName', label: '会员类型', formatter: this.formatterMemberTypeName, minWidth: 120},
				{prop: 'levelName', label: '会员等级', minWidth: 120},
				{prop: 'remainder', label: '会员余额', minWidth: 120},
				{prop: 'integration', label: '会员积分', minWidth: 120},
				{prop: 'freezeIntegral', label: '冻结积分', minWidth: 120},
				{prop: 'statusVal', label: '状态', minWidth: 120},
				{prop: 'createTime', label: '注册时间', minWidth: 150},
			],
			pageRequest: {pageNum: 1, pageSize: 10},
			pageResult: {},
			operation: false, // true:查看, false:编辑
			editDialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {},
			// 新增编辑界面数据
			dataForm: {
				id: '',
				memberTypeName: '',
				remark: ''
			}
		}
	},

	methods: {
		formatterBirthday(row, column, cellValue, index) {
			if (cellValue == '') {
				return '1991-12-18'
			}
		},
		formatterMemberTypeName(row, column, cellValue, index) {
			if (cellValue == '') {
				return '平台'
			} else if (cellValue == '普通会员') {
				return '淘宝'
			} else {
				return '京东'
			}
		},
		// 获取分页数据
		findPage: function (data) {
			let this_ = this
			this_.filters = {}
			if (data != null && data.start != null) {
				if (data.start != null) {
					this.pageRequest.pageNum = data.start
				}
				if (data.limit != null) {
					this.pageRequest.pageSize = data.limit
				}
				if (data.mobile != null) {
					this_.filters.mobile = data.mobile
				}
			}
			this_.filters.start = this.pageRequest.pageNum
			this_.filters.limit = this.pageRequest.pageSize
			this.utils.request.queryMemberList(this_.filters, function (res) {
				if (res.data == null) {
					res.data.rows = []
				}
				this_.$refs.CyTable.findPage({content: res.data.rows, total: res.data.total})
			})
		},
		// 显示查看界面
		handleEdit: function (params) {
			this.editDialogVisible = true
			this.disabledBoolean = false
			this.operation = false
			this.$nextTick(function () {
				this.dataForm = Object.assign({}, params.row)
			})
		},
		// 显示编辑界面
		handleDetail: function (params) {
			this.editDialogVisible = true
			this.disabledBoolean = true
			this.operation = true
			this.$nextTick(function () {
				this.dataForm = Object.assign({}, params.row)
			})
		},
		// 编辑
		submitForm: function () {
			this.$refs.dataForm.validate(valid => {
				if (valid) {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						var this_ = this
						this_.dataForm.birthDate = formatWithSeperator(this_.dataForm.birthDate, '-', ':')
						this.utils.request.editMemberInfo(this.dataForm, function (res) {
							if (res.code == '0000') {
								this_.$message({message: '操作成功', type: 'success'})
								this_.$refs['dataForm'].resetFields()
								this_.editDialogVisible = false
								this_.findPage(null)
							} else {
								this_.$message({
									message: '操作失败, ' + res.message,
									type: 'error'
								})
							}
						})
					})
				}
			})
		},
		// 时间格式化
		dateFormat: function (row, column, cellValue, index) {
			return format(row[column.property])
		},
	},
}
</script>

<style scoped lang="scss"></style>
